<template>
  <el-dialog v-if="dialogFormVisible" title="添加商户" :visible.sync="dialogFormVisible" width="40%" :modal="true" :close-on-click-modal="false">
    <!-- :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: true}" -->
    <vxe-table
      ref="treeTable"
      resizable
      row-id="id"
      :loading="loading"
      border
      highlight-hover-row
      highlight-current-row
      :checkbox-config="{checkRowKeys: defaultSelecteRows, highlight: true}"
      height="500"
      :data="tenantList"
      @checkbox-change="togglePaperSelect"
      @checkbox-all="toggleAllPaperSelect"
    >
      <vxe-table-column type="checkbox" field="checked" width="50" align="center" />
      <vxe-table-column field="code" min-width="120" title="商户编码" />
      <vxe-table-column field="name" min-width="120" title="商户名称" />
    </vxe-table>
    <vxe-pager
      :current-page.sync="tableCurrentPage"
      :page-size.sync="pageSize"
      :total="total"
      :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']"
      @page-change="getRentList"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeFn">取 消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getPageList } from '@/api/tenant'
export default {
  props: {
    defaultList: {
      required: true,
      type: Array,
      default: () => []
    },
    dialogVisible: {
      required: false,
      type: String,
      default: ''
    },
    from: {
      required: false,
      type: String,
      default: ''
    },
    obj: {
      required: false,
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogFormVisible: true,
      defaultSelecteRows: [],
      loading: false,
      tenantList: [],
      tableCurrentPage: 1,
      pageSize: 10,
      total: 0,
      params: {},
      returnList: [],
      selectedPapers: new Set(),
      selectedPapersList: new Set(),
      paperResult: [],
      paramsDefaultList: [],
      paramsDefaultListOld: []
    }
  },
  created() {
    if (this.defaultList) {
      this.defaultList.forEach((item, index) => {
        if (item._XID) {
          delete item._XID
        }
        this.selectedPapers.add(item.id)
        this.selectedPapersList.add(item)
      })
      console.log('this.defaultList', this.defaultList)
      console.log('selectedPapers', this.selectedPapers)
    }
    this.getList()
  },
  methods: {
    uniQue(arr) {
      const res = new Map()
      return arr.filter((a) => !res.has(a) && res.set(a, 1))
      // return Array.from(new Set(arr))
    },
    togglePaperSelect({ row, rowid, checked }) {
      console.log(rowid)
      if (checked) {
        this.selectedPapers.add(rowid)
        this.selectedPapersList.add(row)
        console.log('changeSelect', this.selectedPapers)
        console.log('changeSelect', this.selectedPapersList)
      } else {
        this.selectedPapers.delete(rowid)
        this.selectedPapersList.delete(row)
        console.log('delSelect', this.selectedPapers)
        console.log('delSelect', this.selectedPapersList)
      }
    },

    toggleAllPaperSelect({ records, checked }) {
      if (checked) {
        records.forEach(item => this.selectedPapers.add(item.id))
        records.forEach(item => this.selectedPapersList.add(item))
      } else {
        // 注意取消全选时需要遍历当前表格数据来删除，records不管用
        this.paperResult.forEach(item => this.selectedPapers.delete(item.id))
        this.paperResult.forEach(item => this.selectedPapersList.delete(item))
      }
    },
    getRentList(val) {
      this.tableCurrentPage = val.currentPage
      this.getList()
      console.log('val', val)
    },
    getList() {
      this.params.from = this.from
      this.params.obj = this.obj
      getPageList({
        pageNum: this.tableCurrentPage,
        pageSize: this.pageSize,
        ...this.params
      }).then(response => {
        this.tenantList = response.records
        this.paperResult = response.records
        this.total = response.total
        // this.defaultSelecteRows = this.defaultList.map(item => item.id)
        const table = this.$refs.treeTable
        console.log('table', table)
        if (this.paperResult) {
          this.paperResult.forEach((paper, index) => {
            if (this.selectedPapers.has(paper.id)) {
              // this.paramsDefaultList.push(this.paperResult[index])
              table.setCheckboxRow(this.paperResult[index], true)
              // table.setCheckboxRow(table.getRowById(paper.id), true);
            }
          })
          // this.paramsDefaultList = this.uniQue(this.paramsDefaultListOld)

          console.log('this.paramsDefaultList', this.paramsDefaultList)
        }
      })
    },
    submit() {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      console.log('submit_', Array.from(this.selectedPapers))
      const selectedPapersList = Array.from(this.selectedPapersList)
      const selectedPapers = Array.from(this.selectedPapers)
      console.log('submit_selectedPapers', Array.from(selectedPapers))
      this.returnList = selectedPapersList.filter(item => selectedPapers.indexOf(item.id) > -1)
      // this.returnList = selectedPapers
      // this.returnList = this.$refs.treeTable.getCheckboxRecords()
      console.log('this.returnList', this.returnList)
      this.$emit('getInfo')
      this.dialogFormVisible = false
      this.$emit('dialogShopVisible', this.dialogFormVisible)
    },
    closeFn() {
      this.dialogFormVisible = false
      this.$emit('dialogShopVisible', this.dialogFormVisible)
    }
  }
}
</script>

<style lang="scss">

</style>
